<template>
  <section class="bg">
    <top-title
      :show-info="showInfos"
      style="height: 6.4vw"
      @handleLogin="handleLogin"
    />
    <section class="main">
      <section class="flex-none main-left">
        <section class="left-chip-1">
          <Subheading title="今日事件" />
          <section class="card">
            <NumberCard :num="0" class="num" />
            <NumberCard :num="0" class="num" />
            <NumberCard :num="3" class="num" />
            <NumberCard :num="3" class="num" />
            <NumberCard :num="3" class="num" />
            <NumberCard :num="3" class="num" />
          </section>
        </section>
        <section class="left-chip-2">
          <Subheading title="地区生产总值变化" />
          <section class="chart-sec">
            <ChartTool :width="30.2" :height="8.43" :chart-options="qdnProductChartOpts" />
          </section>
        </section>
        <section class="left-chip-3">
          <section class="tab-top">
            <section class="title">
              <Subheading title="第一产业" />
            </section>
            <section style="display: flex">
              <TabTool
                :title="item.title"
                :index="item.index"
                :current-index="productTabCurrentIndex"
                v-for="item in productTabs"
                :key="item.index"
                @switch="(index: string) => (productTabCurrentIndex = index)"
              />
            </section>
          </section>
          <section v-show="productTabCurrentIndex == 'nl'" class="tab-bottom-0">
            <ChartTool :width="13.489" :height="7.656" :chart-options="productChartOptsNl1" />
            <ChartTool :width="16.51" :height="7.656" :chart-options="productChartOptsNl2" />
          </section>
          <section v-show="productTabCurrentIndex == 'lsmj'" class="tab-bottom-0">
            <ChartTool :width="13.489" :height="7.656" :chart-options="productChartOptsLsmj1" />
            <ChartTool :width="16.51" :height="7.656" :chart-options="productChartOptsLsmj2" />
          </section>
          <section v-show="productTabCurrentIndex == 'lscl'" class="tab-bottom-0">
            <ChartTool :width="13.489" :height="7.656" :chart-options="productChartOptsLscl1" />
            <ChartTool :width="16.51" :height="7.656" :chart-options="productChartOptsLscl2" />
          </section>
          <section v-show="productTabCurrentIndex == 'zny'" class="tab-bottom-0">
            <ChartTool :width="13.489" :height="7.656" :chart-options="productChartOptsZny1" />
            <ChartTool :width="16.51" :height="7.656" :chart-options="productChartOptsZny2" />
          </section>
          <section v-show="productTabCurrentIndex == 'qt'" class="tab-bottom-0">
            <ChartTool :width="13.489" :height="7.656" :chart-options="productChartOptsQt1" />
            <ChartTool :width="16.51" :height="7.656" :chart-options="productChartOptsQt2" />
          </section>
        </section>
        <section class="left-chip-4">
          <section class="tab-top">
            <section class="title">
              <Subheading title="第二产业" />
            </section>
            <section style="display: flex">
              <TabTool
                :title="item.title"
                :index="item.index"
                :current-index="productTabCurrentIndex2"
                v-for="item in productTabs2"
                :key="item.index"
                @switch="(index: string) => (productTabCurrentIndex2 = index)"
              />
            </section>
          </section>
          <section v-show="productTabCurrentIndex2 == 'gy'" class="tab-bottom-1">
            <section style="width: 22%">
              <Border2Block title="经济类型">
                <TextBlock title="国有企业" trend="上涨" :percent="5.6" />
                <TextBlock title="股份制企业" trend="上涨" :percent="2.8" />
              </Border2Block>
            </section>
            <section style="width: 48%">
              <Border2Block title="基本门类">
                <section style="display: flex">
                  <section style="width: 50%">
                    <TextBlock title="采矿业" trend="下降" :percent="32.6" />
                    <TextBlock title="制造业" trend="下降" :percent="6.0" />
                  </section>
                  <section style="width: 40%; padding-top: 8%">
                    <TextBlock title="电力、热力、燃气及水生产和供应业" trend="下降" :percent="1.7" />
                  </section>
                </section>
              </Border2Block>
            </section>
            <section style="width: 22%">
              <Border2Block title="工业类型">
                <TextBlock title="轻工业" trend="上涨" :percent="29.2" />
                <TextBlock title="重工业" trend="下降" :percent="3.4" />
              </Border2Block>
            </section>
          </section>
          <section v-show="productTabCurrentIndex2 == 'gq'" class="tab-bottom-1">
            <section style="width: 26.7%; margin-left: 4%">
              <Border2Block title="规模以上工业企业">
                <TextBlock title="营业收入" trend="上涨" :percent="7.6" :value="353.42" />
              </Border2Block>
            </section>
            <section style="width: 59.4%; margin-right: 3%">
              <Border2Block title="全年规模以上工业企业">
                <section style="display: flex">
                  <section style="width: 40%; margin-top: 3%">
                    <TextBlock title="利润总额" trend="下降" :percent="92.1" :value="1.28" />
                  </section>
                  <section style="width: 60%">
                    <TextBlock title="百元营业收入中的成本" trend="上涨" :percent="5.1" :value="88.45" />
                  </section>
                </section>
              </Border2Block>
            </section>
          </section>
          <section v-show="productTabCurrentIndex2 == 'jz'" class="tab-bottom-1">
            <section style="width: 26.7%; margin-left: 4%">
              <Border2Block title="建筑业">
                <TextBlock title="增加值" trend="上涨" :percent="7.7" :value="123.07" />
              </Border2Block>
            </section>
            <section style="width: 59.4%; margin-right: 3%">
              <Border2Block title="具有资质等级的总承包和专业承包建筑业企业">
                <section style="display: flex">
                  <section style="width: 40%; margin-top: 3%">
                    <TextBlock title="总产值" trend="上涨" :percent="21.6" :value="254.1" />
                  </section>
                  <section style="width: 60%">
                    <TextBlock title="国有控股企业产值" trend="上涨" :percent="48.1" :value="121.4" />
                  </section>
                </section>
              </Border2Block>
            </section>
          </section>
        </section>
        <section class="left-chip-5">
          <section class="tab-top">
            <section class="title">
              <Subheading title="第三产业" />
            </section>
            <section style="display: flex">
              <TabTool
                :title="item.title"
                :index="item.index"
                :current-index="productTabCurrentIndex3"
                v-for="item in productTabs3"
                :key="item.index"
                @switch="(index: string) => (productTabCurrentIndex3 = index)"
              />
            </section>
          </section>
          <section v-show="productTabCurrentIndex3 == 'sx'" class="tab-bottom-0">
            <ChartTool :width="13.54" :height="7.916" :chart-options="productChartOptsSx1" />
            <ChartTool :width="13.02" :height="7.916" :chart-options="productChartOptsSx2" />
          </section>
          <section v-show="productTabCurrentIndex3 == 'wk'" class="jckgk">进出口概况</section>
          <section v-show="productTabCurrentIndex3 == 'wk'" class="tab-bottom-0">
            <section class="wk-text">
              <TextBlock style="" title="外贸进出口总额" trend="上涨" :percent="92.2" :value="9.53" />
              <TextBlock style="" title="实际利用外资总额" trend="下降" :percent="71.2" :value1="1025" />
            </section>
            <ChartTool :width="13.02" :height="7.916" :chart-options="productChartOptsWk2" />
          </section>
          <section v-show="productTabCurrentIndex3 == 'jr'" class="tab-bottom-0">
            <ChartTool :width="13.54" :height="7.916" :chart-options="productChartOptsJr1" />
            <ChartTool :width="13.02" :height="7.916" :chart-options="productChartOptsJr2" />
          </section>
          <section v-show="productTabCurrentIndex3 == 'bx'" class="tab-bottom-0">
            <ChartTool :width="13.54" :height="7.916" :chart-options="productChartOptsBx1" />
            <ChartTool :width="13.02" :height="7.916" :chart-options="productChartOptsBx2" />
          </section>
        </section>
      </section>
      <section class="flex-none main-center">
        <section class="center-chip-1">
          <StatisticCard title="人口总量" per-unit="万人" :value="375.73" />
          <StatisticCard title="人口密度" per-unit="人/平方千米" :value="123" />
          <StatisticCard title="经济生产总值 GDP" per-unit="亿元" :value="1329.65" />
        </section>
        <section class="center-chip-2">
          <MapShow
            :width="26.93"
            :height="27.9"
            address-j-x="QDN"
            json-path="/json/map/gzs.json"
            color="#00A0E9"
            @click="handleTo"
          />
        </section>
        <section class="center-chip-3"><TurnToTab /></section>
        <section class="center-chip-4">
          <Subheading title="城市管理" />
          <section style="height: 100%">
            <ChartTool :width="33.125" :height="5.99" :chart-options="cgChartOpts" />
            <section class="cg-sec">
              <section v-for="item in cgStatistic" :key="item.title" class="gradient gradient-block1">
                <section>{{ item.title }}</section>
                <section class="value">{{ item.value }}</section>
              </section>
            </section>
          </section>
        </section>
      </section>
      <section class="flex-none main-right">
        <section class="right-chip-1">
          <Subheading title="值班值守" />
          <section class="list-bottom">
            <section style="width: 38%">
              <IConListCard content="值班领导">
                <PersonCard v-for="item in personList1" :name="item.name" :posts="item.posts" :key="item.name" />
              </IConListCard>
            </section>
            <section style="width: 58%">
              <IConListCard content="总值班室">
                <PersonCard v-for="item in personList2" :name="item.name" :posts="item.posts" :key="item.name" />
              </IConListCard>
            </section>
          </section>
        </section>
        <section class="right-chip-2">
          <section class="lt">全州值班情况</section>
          <section class="qzzbqk">
            <section class="gradient gradient-block2" v-for="item in zbQkList" :key="item.bm">
              <section class="bm">{{ item.bm }}</section>
              <section class="sl">
                <img height="15vw" src="@/assets/imgs/dataAnalysis/jg.png" alt="" />
                <sapn class="sl-span">{{ `${item.bmNum} 个` }}</sapn>
              </section>
              <section class="sl">
                <img height="15vw" src="@/assets/imgs/dataAnalysis/ry.png" alt="" />
                <sapn class="sl-span">{{ `${item.ryNum} 人` }}</sapn>
              </section>
            </section>
          </section>
        </section>
        <section class="right-chip-3">
          <section class="tab-top">
            <section class="title">
              <Subheading title="应急概况" />
            </section>
            <section style="display: flex">
              <TabTool
                :title="item.title"
                :index="item.index"
                :current-index="yjTabCurrentIndex"
                v-for="item in yjTabs"
                :key="item.index"
                @switch="(index: string) => (yjTabCurrentIndex = index)"
              />
            </section>
          </section>
          <section v-show="yjTabCurrentIndex == 'slxf'" class="tab-bottom-0">
            <ChartTool :width="15.052" :height="13.593" :chart-options="yjChartOpts" />
            <section style="height: 100%; margin-top: 0.5208vw"><TableBlock /></section>
          </section>
          <section v-show="yjTabCurrentIndex == 'yjjy'" class="tab-bottom-0">
            <ChartTool :width="15.052" :height="13.593" :chart-options="yjjyChartOpts1" />
            <ChartTool :width="15.052" :height="13.593" :chart-options="yjjyChartOpts2" />
          </section>
          <section v-show="yjTabCurrentIndex == 'fxkz' || yjTabCurrentIndex == 'whwp'" class="zwsj">暂无数据</section>
        </section>
        <section class="right-chip-4">
          <Subheading title="社会治理" />
          <section class="tab-bottom-0">
            <section style="width: 45%">
              <section class="jbqk">基本情况</section>
              <section style="margin-top: 5%; margin-bottom: 10%">
                <NumStatisticBlock title="房屋总数" :num="1399429" per-unit="户" />
              </section>
              <NumStatisticBlock title="入户走访总次数" :num="2476579" per-unit="家次" />
            </section>
            <section style="width: 55%; padding-top: 8%">
              <ChartTool :width="17.604" :height="11.927" :chart-options="shzlChartOpts" />
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { ITopTitleShowInfoDto } from '@/types/dto/topTitleDto'
import ChartTool from '@/views/DataConter/components/ChartTool.vue'
import Subheading from '@/views/DataConter/components/Subheading.vue'
import TabTool from '@/views/DataConter/components/tabTool.vue'
import NumberCard from '@/views/DataConter/components/NumberCard.vue'
import StatisticCard from '@/views/DataConter/components/StatisticCard.vue'
import IConListCard from '@/views/DataConter/components/IConListCard.vue'
import PersonCard from '@/views/DataConter/components/PersonCard.vue'
import TurnToTab from '@/views/DataConter/components/TurnToTab.vue'
import TableBlock from '@/views/DataConter/components/TableBlock.vue'
import Border2Block from '@/views/DataConter/components/Border2Block.vue'
import TextBlock from '@/views/DataConter/components/TextBlock.vue'
import NumStatisticBlock from '@/views/DataConter/components/NumStatisticBlock.vue'

const router = useRouter()

const showInfos = ref<ITopTitleShowInfoDto>({
  title: '数据大屏管理中心',
  showWeather: true,
  showBackFont: true,
  showBackHome: true,
  showBackLogin: true,
  titlePyLegth: -135,
  handlePyLenth: -50
})
const qdnProductChartOpts = ref<any>({
  grid: {
    left: '50vw',
    top: '12vw',
    right: '40vw',
    bottom: '25vw'
  },
  xAxis: {
    type: 'category',
    data: ['2019', '2020', '2021', '2022', '2023'],
    axisLabel: {
      color: 'white'
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false
    },
    axisLabel: {
      color: 'white'
    }
  },
  series: [
    {
      type: 'bar',
      color: '#5087EC',
      data: [1000, 1150, 1200, 1290, 1300]
    }
  ]
})
const productTabs = ref<Array<any>>([
  {
    title: '农林牧渔业',
    index: 'nl'
  },
  {
    title: '粮食种植面积',
    index: 'lsmj'
  },
  {
    title: '粮食产量',
    index: 'lscl'
  },
  {
    title: '猪牛羊禽肉产量',
    index: 'zny'
  },
  {
    title: '其他',
    index: 'qt'
  }
])
const productTabs2 = ref<Array<any>>([
  {
    title: '工业',
    index: 'gy'
  },
  {
    title: '工业企业',
    index: 'gq'
  },
  {
    title: '建筑业',
    index: 'jz'
  }
])
const productTabs3 = ref<Array<any>>([
  {
    title: '社会消费品',
    index: 'sx'
  },
  {
    title: '外贸进出口',
    index: 'wk'
  },
  {
    title: '金融机构',
    index: 'jr'
  },
  {
    title: '保险公司',
    index: 'bx'
  }
])
const yjTabs = ref<Array<any>>([
  {
    title: '森林消防',
    index: 'slxf'
  },
  {
    title: '应急救援',
    index: 'yjjy'
  },
  {
    title: '防汛抗灾',
    index: 'fxkz'
  },
  {
    title: '危化物品',
    index: 'whwp'
  }
])

const productTabCurrentIndex = ref<string>('nl')
const productTabCurrentIndex2 = ref<string>('gy')
const productTabCurrentIndex3 = ref<string>('jr')
const yjTabCurrentIndex = ref<string>('slxf')

const productChartOptsNl1 = ref<any>({
  grid: {
    left: '50vw',
    top: '12vw',
    right: '0',
    bottom: '20vw'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white'
    },
    data: ['种植业', '林业', '畜牧业', '渔业']
  },
  series: [
    {
      type: 'bar',
      color: '#5087EC',
      data: [280, 70, 60, 20]
    }
  ]
})
const productChartOptsNl2 = ref<any>({
  legend: {
    orient: 'vertical',
    align: 'right',
    right: 0,
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42'],
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      itemStyle: {
        borderRadius: 2,
        borderWidth: 2
      },
      label: {
        show: false
      },
      left: '-20%',
      data: [
        { value: 20, name: '渔业' },
        { value: 60, name: '畜牧业' },
        { value: 70, name: '林业' },
        { value: 280, name: '种植业' }
      ]
    }
  ]
})
const productChartOptsLsmj1 = ref<any>({
  grid: {
    left: '25%',
    top: '15%',
    bottom: '5%',
    right: '5%'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white',
      interval: 0
    },
    data: ['油菜籽', '烤烟', '蔬菜', '药材类', '茶园', '果园']
  },
  series: [
    {
      type: 'bar',
      data: [100, 45, 55, 240, 15, 80]
    }
  ]
})
const productChartOptsLsmj2 = ref<any>({
  legend: {
    left: 'right',
    top: 'middle',
    orient: 'vertical',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42', '#EE752F', '#D95040'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      data: [
        { value: 240, name: '油菜籽' },
        { value: 120, name: '烤烟' },
        { value: 55, name: '蔬菜' },
        { value: 45, name: '药材类' },
        { value: 35, name: '茶园' },
        { value: 15, name: '果园' }
      ]
    }
  ]
})
const productChartOptsLscl1 = ref<any>({
  grid: {
    left: '20%',
    top: '10%',
    right: '0%',
    bottom: '20%'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white'
    },
    data: ['夏粮', '烤烟']
  },
  series: [
    {
      data: [19, 122],
      type: 'bar'
    }
  ]
})
const productChartOptsLscl2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      data: [
        { value: 45, name: '夏粮' },
        { value: 55, name: '秋粮' }
      ]
    }
  ]
})
const productChartOptsZny1 = ref<any>({
  grid: {
    left: '40%',
    top: '10%',
    right: '10%',
    bottom: '20%'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white',
      interval: 0
    },
    data: ['猪（万头）', '牛（万头）', '羊（万头）', '活家禽（万只）', '禽蛋（万吨）']
  },
  series: [
    {
      type: 'bar',
      data: [80, 20, 20, 800, 0]
    }
  ]
})
const productChartOptsZny2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42', '#EE752F'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      data: [
        { value: 45, name: '猪' },
        { value: 5, name: '牛' },
        { value: 35, name: '羊' },
        { value: 34, name: '活家禽' },
        { value: 150, name: '禽蛋' }
      ]
    }
  ]
})
const productChartOptsQt1 = ref<any>({
  grid: {
    left: '25%',
    top: '8%',
    right: '8%',
    bottom: '18%'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white',
      interval: 0
    },
    data: ['油菜籽', '油茶籽', '烤烟', '中药材', '蔬菜', '茶叶', '水果', '水产']
  },
  series: [
    {
      type: 'bar',
      data: [14, 11, 7, 48, 375, 8, 99, 13]
    }
  ]
})
const productChartOptsQt2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42', '#EE752F', '#D95040', '#0014B7', '#817F26'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      left: '-40%',
      data: [
        { value: 45, name: '油菜籽' },
        { value: 15, name: '油茶籽' },
        { value: 40, name: '烤烟' },
        { value: 30, name: '中药材' },
        { value: 20, name: '蔬菜' },
        { value: 22, name: '茶叶' },
        { value: 21, name: '水果' },
        { value: 10, name: '水产' }
      ]
    }
  ]
})

const productChartOptsSx1 = ref<any>({
  legend: {
    orient: 'vertical',
    align: 'right',
    right: 0,
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 3,
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: 79, name: '城镇消费品' },
        { value: 25, name: '乡村消费品' }
      ],
      left: '-25%'
    }
  ]
})
const productChartOptsSx2 = ref<any>({
  legend: {
    orient: 'vertical',
    align: 'right',
    right: 0,
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#D97559', '#E4C477'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 3,
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: 100, name: '商品零售额' },
        { value: 15, name: '餐饮收入额' }
      ],
      left: '-28%'
    }
  ]
})
const productChartOptsWk2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      left: '-25%',
      data: [
        { value: 99, name: '出口' },
        { value: 1, name: '进口' }
      ]
    }
  ]
})
const productChartOptsJr1 = ref<any>({
  legend: {
    orient: 'vertical',
    top: 'bottom',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC'],
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true,
        position: 'center',
        formatter: '上涨{c}.0%',
        fontSize: '50%',
        color: 'white'
      },
      data: [{ value: 11, name: '各项存款余额' }]
    }
  ]
})
const productChartOptsJr2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#D95040', '#F2BD42'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      left: '-25%',
      data: [
        { value: 35, name: '住户存款' },
        { value: 65, name: '各项贷款' }
      ]
    }
  ]
})
const productChartOptsBx1 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      left: '-25%',
      data: [
        { value: 20, name: '财产险公司' },
        { value: 15, name: '人身险公司' }
      ]
    }
  ]
})
const productChartOptsBx2 = ref<any>({
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#D95040', '#F2BD42'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      left: '-25%',
      data: [
        { value: 80, name: '财产险公司' },
        { value: 15, name: '寿险公司' }
      ]
    }
  ]
})

const cgChartOpts = ref<any>({
  grid: {
    left: '120vw',
    top: '12vw',
    right: '40vw',
    bottom: '25vw'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      color: 'white'
    },
    data: ['道路清扫保洁面积', '机械化清扫面积']
  },
  series: [
    {
      type: 'bar',
      color: '#5087EC',
      data: [2300, 2100]
    }
  ]
})
const yjChartOpts = ref<any>({
  grid: {
    left: '50vw',
    top: '12vw',
    right: '10vw',
    bottom: '18vw'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: 'white',
      interval: 0,
      fontSize: 10
    },
    data: ['社区活动', '学校宣传', '家庭', '农村宣传', '企业宣讲']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      color: '#5087EC',
      data: [180, 170, 1000, 500, 90]
    },
    {
      type: 'line',
      color: '#68BBC4',
      data: [180, 200, 1000, 500, 90]
    }
  ]
})
const yjjyChartOpts1 = ref<any>({
  grid: {
    left: '30%',
    top: '10%',
    right: '0%',
    bottom: '30%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: 'white',
      interval: 0,
      rotate: 45,
      fontSize: 8
    },
    data: ['重大安全风险', '较大安全风险', '一般安全风险', '低安全风险']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: 'white'
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        color: '#5087EC',
        fontSize: 10
      },
      data: [111, 2476, 9917, 10155]
    }
  ]
})
const yjjyChartOpts2 = ref<any>({
  color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42', '#EE752F', '#D95040', '#0014B7', '#817F26'],
  series: [
    {
      type: 'pie',
      radius: ['30%', '40%'],
      itemStyle: {
        borderRadius: 3
      },
      label: {
        color: 'white',
        fontSize: 9
      },
      data: [
        { value: 10, name: '州级总体应急预案' },
        { value: 80, name: '专项应急预案' },
        { value: 30, name: '部门预案' },
        { value: 20, name: '保障预案' },
        { value: 10, name: '大型群众性预案' }
      ]
    }
  ]
})
const shzlChartOpts = ref<any>({
  legend: {
    orient: 'vertical',
    align: 'right',
    right: 0,
    top: 'middle',
    textStyle: {
      color: 'white'
    }
  },
  color: ['#5087EC', '#68BBC4', '#58A55C'],
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderRadius: 3,
        borderWidth: 2
      },
      label: {
        show: false
      },
      data: [
        { value: 60, name: '公共安全' },
        { value: 30, name: '矛盾纠纷' },
        { value: 10, name: '民生诉求' }
      ],
      left: '-25%'
    }
  ]
})

const personList1 = ref<Array<any>>([
  {
    name: '张旭',
    posts: '州领导'
  },
  {
    name: '王强',
    posts: '秘书长'
  }
])
const personList2 = ref<Array<any>>([
  {
    name: '龙一',
    posts: '值班主任'
  },
  {
    name: '张旭光',
    posts: '值班员'
  },
  {
    name: '李玉',
    posts: '值班员'
  }
])

const cgStatistic = ref<Array<any>>([
  {
    title: '县城规划区范围路灯总数（盏）',
    value: '74067'
  },
  {
    title: '县城规划区范围路灯亮灯率',
    value: '97.78%'
  },
  {
    title: '建成区窨井盖总数（个）',
    value: '60293'
  }
])

const zbQkList = ref<Array<any>>([
  {
    bm: '州直部门',
    bmNum: 3,
    ryNum: 15
  },
  {
    bm: '各县市',
    bmNum: 3,
    ryNum: 15
  },
  {
    bm: '县直部门',
    bmNum: 3,
    ryNum: 15
  },
  {
    bm: '乡镇街道',
    bmNum: 3,
    ryNum: 15
  }
])




function handleLogin() {
  window.location.href = '/#/login?t=' + new Date().getTime()
  window.location.reload()
}

function handleTo() {
  window.open('/#/klUomc', '_blank')
}
</script>
<style>
.bg {
  color: white;
  &::before {
    content: '';
    background-image: url('@/assets/imgs/dataAnalysis/bg.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8px);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}

.main {
  display: flex;
  justify-content: space-between;
  padding: 0 0.62%;
  height: 88.8%;
}

.flex-none {
  flex: 0 0 auto;
}

.main-left {
  margin-top: -2.8%;
  width: 30.7%;
}

.main-center {
  width: 35.5%;
}

.main-right {
  margin-top: -1.7%;
  width: 31.34%;
}

.left-chip-1 {
  height: 8.854vw;
  .card {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    padding: 5%;
    .num {
      width: 12%;
    }
  }
}

.left-chip-2 {
  height: 10.052vw;
  .chart-sec {
    border: 1px solid rgba(0, 144, 255, 0.5);
    margin-top: 0.15625vw;
  }
}

.tab-bottom-1 {
  display: flex;
  justify-content: space-between;
  height: 79%;
  padding: 0 3%;
  margin-top: 10px;
}

.left-chip-3 {
  height: 10.1vw;
}

.tab-top {
  display: flex;
  justify-content: space-between;
  .title {
    width: 20%;
    height: 32px;
    line-height: 32px;
  }
}

.tab-bottom-0 {
  display: flex;
  height: 82%;
}

.left-chip-4 {
  height: 12.552vw;
}

.left-chip-5 {
  height: 11.198vw;
}

.wk-text {
  display: flex;
  width: 14vw;
  justify-content: space-between;
  padding: 0 0.0625vw;
  text-align: center;
}

.center-chip-1 {
  height: 4.27vw;
  display: flex;
  justify-content: space-between;
  padding: 1% 5% 0 5%;
}

.center-chip-2 {
  padding-left: 10%;
}

.center-chip-3 {
  height: 2.918vw;
}

.center-chip-4 {
  height: 14.63vw;
}

.cg-sec {
  display: flex;
  justify-content: space-between;
  padding: 3% 2%;
}

.gradient-block1 {
  height: 3.958vw;
  padding: 1vw;
  font-size: 0.625vw;
  .value {
    font-size: 1.458vw;
    margin-top: 2%;
  }
}

.right-chip-1 {
  height: 7.525vw;
}

.list-bottom {
  display: flex;
  justify-content: space-between;
  height: 78%;
  margin-top: 2%;
}

.right-chip-2 {
  height: 7.708vw;
  .lt {
    color: white;
    font-family: '微软雅黑-regular';
    font-size: 12px;
    margin: 5px 0;
  }
}

.qzzbqk {
  display: flex;
  justify-content: space-between;
  padding: 1% 1%;
}

.gradient {
  background: linear-gradient(to right, #3b6cde, #31c2d1);
  text-align: center;
  color: white;
  border-radius: 10px;
}

.gradient-block2 {
  padding: 0.5vw 0;
  width: 22%;
  .sl {
    margin-top: 0.5vw;
    display: flex;
    justify-content: space-between;
    padding: 0 20%;
  }
}

.sl-span {
  font-size: 16px;
  font-family: '微软雅黑-regular';
}

.right-chip-3 {
  height: 17.99vw;
}

.zwsj {
  text-align: center;
  padding-top: 20%;
  font-size: 18px;
  font-family: '微软雅黑 Bold, 微软雅黑 Regular, 微软雅黑-bold';
}

.right-chip-4 {
  height: 18.255vw;
}

.jbqk {
  font-family: '微软雅黑 Bold, 微软雅黑 Regular, 微软雅黑-regular';
  font-size: 12px;
  color: white;
  margin-top: 5%;
}

.jckgk {
  margin-left: 1vw;
}
</style>
